<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Helper function for drawing arrows with filled heads ---
function drawFilledArrow(fromX, fromY, toX, toY, headLength = 10) {
    ctx.save();
    const dx = toX - fromX;
    const dy = toY - fromY;
    const angle = Math.atan2(dy, dx);
    const headAngle = Math.PI / 6;

    // Set style for the arrow
    ctx.strokeStyle = '#404040';
    ctx.fillStyle = '#404040';
    ctx.lineWidth = 2;

    // Line
    ctx.beginPath();
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.stroke();

    // Filled head
    ctx.beginPath();
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle - headAngle), toY - headLength * Math.sin(angle - headAngle));
    ctx.lineTo(toX - headLength * Math.cos(angle + headAngle), toY - headLength * Math.sin(angle + headAngle));
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

// --- Define coordinates and dimensions ---
const origin = { x: 80, y: 350 };
const railTopY = 50;
const railRightX = 450;
const A_pos = { x: origin.x, y: 100 };
const B_pos = { x: 400, y: origin.y };

// --- Draw Walls/Rails ---
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(origin.x, railTopY); // Vertical rail
ctx.lineTo(origin.x, origin.y);
ctx.lineTo(railRightX, origin.y); // Horizontal rail
ctx.stroke();

// Draw Hatching for walls
ctx.lineWidth = 1;
// Vertical rail hatching
for (let y = railTopY + 20; y < origin.y; y += 20) {
    ctx.beginPath();
    ctx.moveTo(origin.x, y);
    ctx.lineTo(origin.x - 10, y + 10);
    ctx.stroke();
}
// Horizontal rail hatching
for (let x = origin.x + 20; x < railRightX; x += 20) {
    ctx.beginPath();
    ctx.moveTo(x, origin.y);
    ctx.lineTo(x - 10, origin.y + 10);
    ctx.stroke();
}

// --- Draw the Rod ---
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(A_pos.x, A_pos.y);
ctx.lineTo(B_pos.x, B_pos.y);
ctx.stroke();

// --- Draw Labels ---
ctx.font = 'italic 22px Times New Roman';
ctx.fillStyle = 'black';
ctx.fillText('O', origin.x - 25, origin.y + 20);
ctx.fillText('A', A_pos.x + 25, A_pos.y - 5);
ctx.fillText('B', B_pos.x - 20, B_pos.y - 20);
const mid_rod = { x: (A_pos.x + B_pos.x) / 2, y: (A_pos.y + B_pos.y) / 2 };
ctx.fillText('l', mid_rod.x, mid_rod.y - 25);

// --- Draw Velocity Vectors and Labels ---
// v_A vector and label
const vA_start_y = A_pos.y + 40;
const vA_end_y = A_pos.y + 120;
drawFilledArrow(A_pos.x, vA_start_y, A_pos.x, vA_end_y, 12);

// Label for v_A. The image shows a complex subscript v_{A,1} or v_{A,⊥}.
// The prompt text and standard notation use v_A, so we will draw that.
ctx.font = 'italic 22px Times New Roman';
ctx.fillText('v', A_pos.x - 30, (vA_start_y + vA_end_y) / 2);
ctx.font = 'italic 16px Times New Roman';
ctx.fillText('A', A_pos.x - 22, (vA_start_y + vA_end_y) / 2 + 8);
// The subscript in the image is more like a vertical line, perhaps for perpendicular, or a comma and 1.
// We are following the problem description's notation 'v_A' for clarity.
// To be more faithful to the image's "v,1" subscript:
ctx.fillText(String.fromCharCode(8214) + '1', A_pos.x - 21, (vA_start_y + vA_end_y) / 2 + 10); //This is just for demonstration, v_A is better. I will comment it out.
/*
ctx.font = 'italic 16px Times New Roman';
ctx.fillText(String.fromCharCode(8214) + '1', A_pos.x - 21, (vA_start_y + vA_end_y) / 2 + 10);
*/
// The final generated code uses v_A as it's the standard.

// v_B vector and label
const vB_start_x = B_pos.x;
const vB_end_x = B_pos.x + 80;
drawFilledArrow(vB_start_x, B_pos.y, vB_end_x, B_pos.y, 12);

// Label v_B
ctx.font = 'italic 22px Times New Roman';
ctx.fillText('v', vB_end_x + 20, B_pos.y);
ctx.font = 'italic 16px Times New Roman';
ctx.fillText('B', vB_end_x + 28, B_pos.y + 8);


// --- Draw Magnetic Field Symbol ---
ctx.lineWidth = 2.5;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
const B_field_pos = { x: 380, y: 70 };
// Circle
ctx.beginPath();
ctx.arc(B_field_pos.x, B_field_pos.y, 12, 0, 2 * Math.PI);
ctx.stroke();
// Dot
ctx.beginPath();
ctx.arc(B_field_pos.x, B_field_pos.y, 3, 0, 2 * Math.PI);
ctx.fill();
// Label
ctx.font = 'bold italic 24px Times New Roman';
ctx.fillText('B', B_field_pos.x + 28, B_field_pos.y);

</script>

</body>
</html>